<!--
/**
* Author: ganqz
* Date: 2021-12-07 14:19
* Desc: FormItem
*/
-->
<template>
  <view class="form-item flex flex" :style="customStyle" :class="customClass">
    <view class="form-item__label">
      <slot name="title">{{ title }}</slot>
    </view>
    <view class="form-item__content">
      <slot>{{ value }}</slot>
    </view>
  </view>
</template>

<script lang="ts">
  import styleMixins from '@/mixins/styleMixins'
  import { Mixins, Component, Prop } from 'vue-property-decorator'
  @Component({
    name: 'FormItem'
  })
  export default class FormItem extends Mixins(styleMixins) {
    @Prop(String) title!: string
    @Prop(String) value!: string
  }
</script>

<style lang="scss" scoped>
  .form-item {
    &__label {
      width: 150rpx;
      text-align: justify;
      text-align-last: justify;
      margin-right: 15rpx;
    }
    &__content {
      color: $gray;
    }
  }
</style>
